<template>
  <div>
    <van-row @click="isShowLoginClick">
      <van-col span="6">
        <img :src="avatarSrc" alt />
      </van-col>
      <van-col span="10">{{ nickname }}</van-col>
      <van-col span="8">
        <van-icon :name="loginIcon" @click="isShowOutClick" />
      </van-col>
    </van-row>
    <van-grid :column-num="3" square>
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

    <!-- 登录框 -->
    <van-popup v-model="isShowLogin">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="danger" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>

    <!-- 退出框 -->
    <van-dialog v-model="isShowOut" title="退出确认框" show-cancel-button @confirm="LoginOut">
      <div style="padding:20px 0;text-align:center">确定要退出登录吗?</div>
    </van-dialog>
  </div>
</template>

<script>
import { ToLogin } from "@/request/api";
import avatarSrc from "../assets/avatar.png"
import {mapState,mapMutations} from "vuex"
export default {
  data() {
    return {
      // 默认头像
      avatarSrc,
      // 显示登录注册
      isShowLogin: false,

      // 默认用户名密码
      username: "",
      password: "",
      nickname: "点击登录",
      loginIcon: "arrow",

      isShowOut: false,
    };
  },
  computed:{
    ...mapState({
      isGoBack:state=>state.isGoBack.isGoBack
    })
  },
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.avatarSrc = userInfo.avatar;
      this.nickname = userInfo.nickname;
      this.loginIcon = "cross";
    }
  },
  methods: {
    ...mapMutations({
      changeisGoBack:"isGoBack/changeisGoBack"
    }),
    LoginOut(){
      // 退出登录效果
      // 1.提示用户退出登录成功
      this.$toast.success("退出登录成功")
      // 2.删除本地存储中的token和用户常用信息
      localStorage.removeItem("token")
      localStorage.removeItem("userInfo")  
      // 3.把页面上的用户基本信息还原回默认值
      this.avatarSrc = avatarSrc
      this.nickname = "点击登录"
      this.loginIcon = "arrow"
    },
    isShowOutClick(){
      let token = localStorage.getItem("token")
      if(!token)return
      this.isShowOut = true
    },
    isShowLoginClick() {
      // 如果没有登录，才展示登录框
      // 如果有登录就直接return掉
      let token = localStorage.getItem("token");
      if (token) return;

      // 展示登录框
      this.isShowLogin = true;
    },
    onSubmit(values) {
      // // 点击登录按钮
      // console.log("submit", values); // values获取到的是一个对象
      // console.log("submit", values["用户名"]); // 对象.键  --> 获取到用户名的值
      // console.log("submit", values["密码"]); // 对象.键  --> 获取到密码的值
      let username = values["用户名"];
      let pwd = values["密码"];
      // 发起登录请求
      ToLogin({ username, pwd }).then((res) => {
        // 登录成功之后的业务逻辑
        // 1.提示用户登录成功
        // 2.保存token值和用户常用信息到本地存储
        // 3.关闭登录窗口
        // 4.把用户基本信息渲染到页面
        console.log(res);

        let userInfo = res.data.userInfo;
        // 1.提示用户登录成功
        this.$toast.success("登录成功");
        // 2.保存token值和用户常用信息到本地存储
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(userInfo)); //将用户信息转换成字符串类型
        setTimeout(() => {
          // 3.关闭登录窗口
          this.isShowLogin = false;
          // 4.把用户基本信息渲染到页面
          this.avatarSrc = userInfo.avatar;
          this.nickname = userInfo.nickname;
          this.loginIcon = "cross";
        }, 500);

        // 是否需要返回上一级
        if(this.isGoBack){
          this.$router.go(-1)
          this.changeisGoBack(false)
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.14rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 90%;
  .van-form {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
}
</style>